import React, { useState } from 'react';
import ReactDom from 'react-dom';
import { useEffect } from 'react/cjs/react.development';
import request from 'utils/request';
const App = () => {
  const [list, setList] = useState([]);

  async function loadData() {
    const res = await request({ url: '/v1_0/channels' });
    console.log('res  ----->  ', res);
    setList(res.data.channels);
  }
  // 2. 挂载时发送请求
  // 🔔 useEffect接受一个同步函数，异步函数放Effect之外或之内
  useEffect(() => {
    loadData();
  }, []);

  // ❌ 不推荐的写法
  // useEffect(async () => {
  //   await loadData();
  // }, []);
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
ReactDom.render(<App />, document.getElementById('root'));
